<?php
  $this->headTitle($this->title);
  $this->headLink()->appendStylesheet(Zend_Registry::get('static_path').'css/user.css');
  $this->headLink()->appendStylesheet(Zend_Registry::get('static_path').'css/frontierCalendar/jquery-frontier-cal-1.3.2.css');
  $this->headLink()->appendStylesheet(Zend_Registry::get('static_path').'css/colorpicker/colorpicker.css');
  $this->headLink()->appendStylesheet(Zend_Registry::get('static_path').'css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css');


  $this->headScript()->appendFile(Zend_Registry::get('static_path').'js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js');
  $this->headScript()->appendFile(Zend_Registry::get('static_path').'js/colorpicker/colorpicker.js');
  $this->headScript()->appendFile(Zend_Registry::get('static_path').'js/lib/jshashtable-2.1.js');
  $this->headScript()->appendFile(Zend_Registry::get('static_path').'js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js');
  $this->headScript()->appendFile(Zend_Registry::get('static_path').'js/frontierCalendar/jquery-frontier-cal-1.3.2.js');

  $this->layout()->setLayout('userlayout');
?>
<div class="nav"><a href="<?php echo $this->url(array( 'controller' => 'resident', 'action'     => 'index'),'default', true) ?>" class="navlink">Control Panel</a><img src="../images/arrow.gif" class="arrow"/> Calendar & Events</div>


<!-- Some CSS for our example. (Not required for calendar plugin. Used for example.)-->
<style type="text/css" media="screen">

.shadow {
	-moz-box-shadow: 3px 3px 4px #aaaaaa;
	-webkit-box-shadow: 3px 3px 4px #aaaaaa;
	box-shadow: 3px 3px 4px #aaaaaa;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa');
}
</style>

<script type="text/javascript">
$(document).ready(function(){

	var clickDate = "";
	var clickAgendaItem = "";
        var currentDate="";

        if($("#dateSelect").val() ==""){
            var d= new Date();
            currentDate = d.getFullYear()+"-" +(d.getMonth()+1) +"-"+ d.getDate() ;
        }else{
            currentDate = $("#dateSelect").val() ;
        }
       $.ajax({
                  type: "POST",
                  url:  path+"calendar/get",
                  dataType: 'json',
                  data: {startDate:currentDate},
                  cache: false,
                  success: function(data){
                     $.each(data, function(i, item) {
                         var arr1 = item._startTime.split(":");
                         var arr2 = item._endTime.split(":");
                        var startDateObj = new Date(parseInt(item._startDate.substring(0,4)),parseInt(item._startDate.substring(5,7))-1,parseInt(item._startDate.substring(8,10)),arr1[0] ,arr1[1],0,0);
			var endDateObj = new Date(parseInt(item._endDate.substring(0,4)),parseInt(item._endDate.substring(5,7))-1,parseInt(item._endDate.substring(8,10)),arr2[0],arr2[1],0,0);
                        jfcalplugin.addAgendaItem(
                                "#mycal",
                                item._description,
                                startDateObj,
                                endDateObj,
                                false,
                                {
                                    eventId:item._eventId
                                },
                                {
                                        backgroundColor: item._background,
                                        foregroundColor: item._foreground
                                }
                           );
                     });
                }
            });

	/**
	 * Initializes calendar with current year & month
	 * specifies the callbacks for day click & agenda item click events
	 * then returns instance of plugin object
	 */
	var jfcalplugin = $("#mycal").jFrontierCal({
		date: new Date(),
		dayClickCallback: myDayClickHandler,
		agendaClickCallback: myAgendaClickHandler,
		agendaDropCallback: myAgendaDropHandler,
		agendaMouseoverCallback: myAgendaMouseoverHandler,
		applyAgendaTooltipCallback: myApplyTooltip,
		agendaDragStartCallback : myAgendaDragStart,
		agendaDragStopCallback : myAgendaDragStop,
		dragAndDropEnabled: false
	}).data("plugin");

	/**
	 * Do something when dragging starts on agenda div
	 */
	function myAgendaDragStart(eventObj,divElm,agendaItem){
		// destroy our qtip tooltip
		if(divElm.data("qtip")){
			divElm.qtip("destroy");
		}
	};

	/**
	 * Do something when dragging stops on agenda div
	 */
	function myAgendaDragStop(eventObj,divElm,agendaItem){
		//alert("drag stop");
	};

	/**
	 * Custom tooltip - use any tooltip library you want to display the agenda data.
	 * for this example we use qTip - http://craigsworks.com/projects/qtip/
	 *
	 * @param divElm - jquery object for agenda div element
	 * @param agendaItem - javascript object containing agenda data.
	 */
	function myApplyTooltip(divElm,agendaItem){

		// Destroy currrent tooltip if present
		if(divElm.data("qtip")){
			divElm.qtip("destroy");
		}

		var displayData = "";

		var title = agendaItem.title;
		var startDate = agendaItem.startDate;
		var endDate = agendaItem.endDate;
		var allDay = agendaItem.allDay;
		var data = agendaItem.data;
		displayData += "<br><b>" + title+ "</b><br><br>";
		if(allDay){
			displayData += "(All day event)<br><br>";
		}else{
			displayData += "<b>Starts:</b> " + startDate + "<br>" + "<b>Ends:</b> " + endDate + "<br><br>";
		}
		for (var propertyName in data) {
			displayData += "<input type='hidden' id='" + propertyName + "' value='" + data[propertyName] + "'/>"
		}
		// use the user specified colors from the agenda item.
		var backgroundColor = agendaItem.displayProp.backgroundColor;
		var foregroundColor = agendaItem.displayProp.foregroundColor;
		var myStyle = {
			border: {
				width: 5,
				radius: 10
			},
			padding: 10,
			textAlign: "left",
			tip: true,
			name: "dark" // other style properties are inherited from dark theme
		};
		if(backgroundColor != null && backgroundColor != ""){
			myStyle["backgroundColor"] = backgroundColor;
		}
		if(foregroundColor != null && foregroundColor != ""){
			myStyle["color"] = foregroundColor;
		}
		// apply tooltip
		divElm.qtip({
			content: displayData,
			position: {
				corner: {
					tooltip: "bottomMiddle",
					target: "topMiddle"
				},
				adjust: {
					mouse: true,
					x: 0,
					y: -15
				},
				target: "mouse"
			},
			show: {
				when: {
					event: 'mouseover'
				}
			},
			style: myStyle
		});

	};

	/**
	 * Make the day cells roughly 3/4th as tall as they are wide. this makes our calendar wider than it is tall.
	 */
	jfcalplugin.setAspectRatio("#mycal",0.75);

	/**
	 * Called when user clicks day cell
	 * use reference to plugin object to add agenda item
	 */
	function myDayClickHandler(eventObj){
	
	};

	/**
	 * Called when user clicks and agenda item
	 * use reference to plugin object to edit agenda item
	 */
	function myAgendaClickHandler(eventObj){
		// Get ID of the agenda item from the event object
		var agendaId = eventObj.data.agendaId;
		// pull agenda item from calendar
		var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId);
		clickAgendaItem = agendaItem;
		$("#display-event-form").dialog('open');
	};

	/**
	 * Called when user drops an agenda item into a day cell.
	 */
	function myAgendaDropHandler(eventObj){
			};

	/**
	 * Called when a user mouses over an agenda item
	 */
	function myAgendaMouseoverHandler(eventObj){
		var agendaId = eventObj.data.agendaId;
		var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId);
		//alert("You moused over agenda item " + agendaItem.title + " at location (X=" + eventObj.pageX + ", Y=" + eventObj.pageY + ")");
	};
	/**
	 * Initialize jquery ui datepicker. set date format to yyyy-mm-dd for easy parsing
	 */
	$("#dateSelect").datepicker({
		showOtherMonths: true,
		selectOtherMonths: true,
		changeMonth: true,
		changeYear: true,
		showButtonPanel: true,
		dateFormat: 'yy-mm-dd'
	});

	/**
	 * Set datepicker to current date
	 */
	$("#dateSelect").datepicker('setDate', new Date());
	/**
	 * Use reference to plugin object to a specific year/month
	 */
	$("#dateSelect").bind('change', function() {
		var selectedDate = $("#dateSelect").val();
		var dtArray = selectedDate.split("-");
		var year = dtArray[0];
		// jquery datepicker months start at 1 (1=January)
		var month = dtArray[1];
		// strip any preceeding 0's
		month = month.replace(/^[0]+/g,"")
		var day = dtArray[2];
		// plugin uses 0-based months so we subtrac 1
                     $.ajax({
                  type: "POST",
                  url:  path+"calendar/get",
                  dataType: 'json',
                  data: {startDate:$("#dateSelect").val()},
                  cache: false,
                  success: function(data){
                     $.each(data, function(i, item) {
                         var arr1 = item._startTime.split(":");
                         var arr2 = item._endTime.split(":");
                        var startDateObj = new Date(parseInt(item._startDate.substring(0,4)),parseInt(item._startDate.substring(5,7))-1,parseInt(item._startDate.substring(8,10)),arr1[0] ,arr1[1],0,0);
			var endDateObj = new Date(parseInt(item._endDate.substring(0,4)),parseInt(item._endDate.substring(5,7))-1,parseInt(item._endDate.substring(8,10)),arr2[0],arr2[1],0,0);
                        jfcalplugin.deleteAgendaItemByDataAttr('#mycal','eventId',item._eventId);
                        jfcalplugin.addAgendaItem(
                                "#mycal",
                                item._description,
                                startDateObj,
                                endDateObj,
                                false,
                                {
                                    eventId:item._eventId
                                },
                                {
                                        backgroundColor: item._background,
                                        foregroundColor: item._foreground
                                }
                           );
                     });
                }
            });
		jfcalplugin.showMonth("#mycal",year,parseInt(month-1).toString());
	});
	/**
	 * Initialize previous month button
	 */
	$("#BtnPreviousMonth").button();
	$("#BtnPreviousMonth").click(function() {
		jfcalplugin.showPreviousMonth("#mycal");
		// update the jqeury datepicker value
		var calDate = jfcalplugin.getCurrentDate("#mycal"); // returns Date object
		var cyear = calDate.getFullYear();
		// Date month 0-based (0=January)
		var cmonth = calDate.getMonth();
		var cday = calDate.getDate();
		// jquery datepicker month starts at 1 (1=January) so we add 1
		$("#dateSelect").datepicker("setDate",cyear+"-"+(cmonth+1)+"-"+cday);
                     $.ajax({
                  type: "POST",
                  url:  path+"calendar/get",
                  dataType: 'json',
                  data: {startDate:$("#dateSelect").val()},
                  cache: false,
                  success: function(data){
                     $.each(data, function(i, item) {
                         var arr1 = item._startTime.split(":");
                         var arr2 = item._endTime.split(":");
                        var startDateObj = new Date(parseInt(item._startDate.substring(0,4)),parseInt(item._startDate.substring(5,7))-1,parseInt(item._startDate.substring(8,10)),arr1[0] ,arr1[1],0,0);
			var endDateObj = new Date(parseInt(item._endDate.substring(0,4)),parseInt(item._endDate.substring(5,7))-1,parseInt(item._endDate.substring(8,10)),arr2[0],arr2[1],0,0);
                        jfcalplugin.deleteAgendaItemByDataAttr('#mycal','eventId',item._eventId);
                        jfcalplugin.addAgendaItem(
                                "#mycal",
                                item._description,
                                startDateObj,
                                endDateObj,
                                false,
                                {
                                    eventId:item._eventId
                                },
                                {
                                        backgroundColor: item._background,
                                        foregroundColor: item._foreground
                                }
                           );
                     });
                }
            });
		return false;
	});
	/**
	 * Initialize next month button
	 */
	$("#BtnNextMonth").button();
	$("#BtnNextMonth").click(function() {
		jfcalplugin.showNextMonth("#mycal");
		// update the jqeury datepicker value
		var calDate = jfcalplugin.getCurrentDate("#mycal"); // returns Date object
		var cyear = calDate.getFullYear();
		// Date month 0-based (0=January)
		var cmonth = calDate.getMonth();
		var cday = calDate.getDate();
		// jquery datepicker month starts at 1 (1=January) so we add 1
		$("#dateSelect").datepicker("setDate",cyear+"-"+(cmonth+1)+"-"+cday);
                     $.ajax({
                  type: "POST",
                  url:  path+"calendar/get",
                  dataType: 'json',
                  data: {startDate:$("#dateSelect").val()},
                  cache: false,
                  success: function(data){
                     $.each(data, function(i, item) {
                         var arr1 = item._startTime.split(":");
                         var arr2 = item._endTime.split(":");
                        var startDateObj = new Date(parseInt(item._startDate.substring(0,4)),parseInt(item._startDate.substring(5,7))-1,parseInt(item._startDate.substring(8,10)),arr1[0] ,arr1[1],0,0);
			var endDateObj = new Date(parseInt(item._endDate.substring(0,4)),parseInt(item._endDate.substring(5,7))-1,parseInt(item._endDate.substring(8,10)),arr2[0],arr2[1],0,0);
                        jfcalplugin.deleteAgendaItemByDataAttr('#mycal','eventId',item._eventId);
                        jfcalplugin.addAgendaItem(
                                "#mycal",
                                item._description,
                                startDateObj,
                                endDateObj,
                                false,
                                {
                                    eventId:item._eventId
                                },
                                {
                                        backgroundColor: item._background,
                                        foregroundColor: item._foreground
                                }
                           );
                     });
                }
            });
		return false;
	});

	/**
	 * Initialize add event modal form
	 */
	
	/**
	 * Initialize display event form.
	 */
	$("#display-event-form").dialog({
		autoOpen: false,
		height: 400,
		width: 400,
		modal: true,
		buttons: {
			Cancel: function() {
				$(this).dialog('close');
			}
		},
		open: function(event, ui){
			if(clickAgendaItem != null){
				var title = clickAgendaItem.title;
				var startDate = clickAgendaItem.startDate;
				var endDate = clickAgendaItem.endDate;
				var allDay = clickAgendaItem.allDay;
				var data = clickAgendaItem.data;

                                var day=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
                                var month =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
                                var startMin =(parseInt(startDate.getMinutes()) < 10) ? ("0"+ startDate.getMinutes()) : startDate.getMinutes();
                                var endMin =(parseInt(endDate.getMinutes()) < 10) ? ("0"+ endDate.getMinutes()) : endDate.getMinutes();
				// in our example add agenda modal form we put some fake data in the agenda data. we can retrieve it here.
				$("#display-event-form").append(
					"<br><b>" + title+ "</b><br><br>"
				);
				if(allDay){
					$("#display-event-form").append(
						"(All day event)<br><br>"
					);
				}else{
					$("#display-event-form").append(
						"<b>Starts:</b> " +day[startDate.getDay()] +"   "+ month[startDate.getMonth()]     +"  "+ (startDate.getMonth()+1)  +"/"+startDate.getDate() +"/"+startDate.getFullYear() +"   "+
                                                    ((startDate.getHours() >12) ? startDate.getHours() -12 : startDate.getHours()) +":"+startMin+"  "+((startDate.getHours() >12) ? "PM" : "AM")
                                                    +"<br>" +
						"<b>Ends:</b> " + day[endDate.getDay()] +"   "+ month[endDate.getMonth()]     +"  "+(endDate.getMonth()+1)  +"/"+endDate.getDate() +"/"+endDate.getFullYear() +"   "+
                                                    ((endDate.getHours() >12) ? endDate.getHours() -12 : endDate.getHours()) +":"+endMin+"  "+((endDate.getHours() >12) ? "PM" : "AM") + "<br><br>"
                                      //      
					);
				}
				for (var propertyName in data) {
					$("#display-event-form").append("<input type='hidden' id='" + propertyName + "' value='" + data[propertyName] + "'");
				}
			}
		},
		close: function() {
			// clear agenda data
			$("#display-event-form").html("");
		}
	});


});
</script>
<br><br>

		<div id="example" style="margin: auto; width:90%;">

		<div id="toolbar"  style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
			<button id="BtnPreviousMonth">Previous Month</button>
			<button id="BtnNextMonth">Next Month</button>
			&nbsp;&nbsp;&nbsp;
			Date: <input type="text" id="dateSelect" size="20"/>
		</div>

		<br>
		<div id="mycal"></div>

		</div>


		

		<div id="display-event-form" title="View Agenda Item">

		</div>
